<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="information">
          <div style="margin: 10px auto;text-align: center;font-size: 20px;">设备基本信息</div>
          <el-form :model="measuringInfo" ref="measuringInfo" label-width="150px">
            <el-form-item label="设备名称:" prop="name">
              {{ measuringInfo.name }}
            </el-form-item>
            <el-form-item label="企业名称:" prop="enterpriseName">
              {{ measuringInfo.enterpriseName }}
            </el-form-item>
            <el-form-item label="采集仪编号:" prop="imei">
              {{ measuringInfo.imei }}
            </el-form-item>
            <el-form-item label="安装时间:" prop="addTime">
              {{ measuringInfo.addTime |dateFormat }}
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="16">
        <div>
          <h2>设备数据列表</h2>
          <uc-table url="admin/equipment/getInMeasuringDatePage" ref="equDataTable" name="设备数据" table-border pageable
                    :page-size="5" :search-form="searchForm">
            <template slot="searchForm">
              <el-form size="mini" :inline="true" :model="searchForm" class="demo-form-inline filter-container">
              </el-form>
            </template>
            <template slot="columns">
              <el-table-column prop="addTime" label="时间"/>
              <el-table-column v-for="(item,index) in tableProp" :key="index" :prop="item.prop" :label="item.label">
              </el-table-column>
            </template>
          </uc-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getInMeasuringEquipmentVo, getInMeasuringDateList} from "@/api/equipment";
import UcTable from "@/components/UcTable/index.vue";


export default {
  name: "measuringInfo",
  components: {UcTable},
  data() {
    return {
      searchForm: {
        equipmentId: this.$route.query.ucId
      },
      //设备信息
      measuringInfo: {},
      //动态列名
      tableProp: [
          {label:"名称1",prop:"key1"},
          {label:"数据值1",prop:"value1"},
          {label:"名称2",prop:"key2"},
          {label:"数据值2",prop:"value2"}
      ]
    }
  },
  created() {
    this.getTableProp(this.$route.query.type)
    this.getInMeasuringEquipmentVo(this.$route.query.ucId)
  },
  methods: {
    //动态列名
    getTableProp(val) {
      //压力表
      switch (val) {
        //室外消火栓采集终端
        case "20":
          this.tableProp = [{label:"压力值",prop:"value1"}]
          break
        //无线数显液位表
        case "40":
          this.tableProp = [{label:"液位值",prop:"value1"},{label:"电量百分比",prop:"value2"}]
          break
        //无线数显压力表
        case "50":
          this.tableProp = [{label:"高精度水压",prop:"value1"},{label:"电量百分比",prop:"value2"}]
          break
        //风速采集仪
        case "60":
          this.tableProp = [{label:"风速",prop:"value1"},{label:"风量",prop:"value2"}]
          break
      }
    },
    //获取检测设备详情
    getInMeasuringEquipmentVo(val) {
      getInMeasuringEquipmentVo({ucId: val}).then(res => {
        this.measuringInfo = res.data
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "获取设备信息失败"
        })
      })
    },
    //获取检测设备推送信息
    getInMeasuringDateList(val) {
      getInMeasuringDateList({equipmentId: val}).then(res => {

      }).catch(res => {

      })
    },
    //搜索
    handleSearch() {
      this.$refs.equDataTable.getTableData(1)
    }
  },
}
</script>

<style scoped>

.information {
  border: 25px;
  border-bottom-color: #3cc51f;
}
</style>
